<template>
  <div class="innerWrapper">
    <BreadCrumb />
    <div style="height:2vh;"></div>
    <el-tabs v-model="actived" @tab-click="handleTabsClick">
      <el-tab-pane label="工业APP" name="1"></el-tab-pane>
      <el-tab-pane label="工业微服务" name="2"></el-tab-pane>
      <el-tab-pane label="工业机理模型" name="3"></el-tab-pane>
    </el-tabs>
    <div class="tableWrapper">
      <el-table :data="pageData" stripe style="width: 100%">
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="openFlag" label="公开">
          <template slot-scope="scope">
           <span v-if="scope.row.openFlag === 1">是</span>
           <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="openFlag" label="审核状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">审核通过</span>
            <span v-else-if="scope.row.status === 0">
              <span v-if="scope.row.openFlag === 1">未审核</span>
              <span v-else> - </span>
            </span>
            <span v-else>审核失败</span>
          </template>
        </el-table-column>
        <el-table-column prop="failReason" label="备注" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="nickname" label="发布人"></el-table-column>
        <el-table-column prop="createDate" width="180" label="发布时间"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="viewDetail(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="editItem(scope.row)" :disabled="scope.row.status === 1" type="text" size="small">编辑</el-button>
            <el-button @click="deleteItem(scope.row)" :disabled="scope.row.status === 1" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagnationWrapper">
      <el-pagination
        style="text-align:center;margin-top:30px;"
        background
        layout="prev, pager, next"
        :total="pagnation.total"
        :page-size="pagnation.pageSize"
        :current-page.sync="pagnation.pageNum"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import BreadCrumb from '@/components/BreadCrumb'
import { mapActions, mapState } from 'vuex'
import { encodeBase64 } from '../../utils/commonUtils'
export default {
  data() {
    return {
      actived: '1'
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.login.loginInfo,
      pagnation: (state) => state.personalInfo.pagnation,
      pageData: (state) => state.personalInfo.pageData,
      tableTab: (state) => state.personalInfo.tableTab
    })
  },
  watch: {
    tableTab() {
      this.$store.commit('personalInfo/setPagnation', { pageNum: 1 })
      this.getList()
    }
  },
  created() {
    this.$store.commit('home/setCurrenttab', '')
    sessionStorage.removeItem('currentTab')
    this.$store.commit('personalInfo/setTableTab', '1')
    this.actived = this.tableTab
    this.getList()
  },
  methods: {
    ...mapActions({
      pageChange: 'personalInfo/getList',
      getList: 'personalInfo/getList'
    }),
    viewDetail(row) {
      sessionStorage.setItem('currentTabBackup', this.actived)
      this.$store.commit('detail/setDetailType', this.actived === 3 ? 1 : this.actived)
      this.$router.push({
        path: '/main/detail',
        query: { id: encodeBase64(row.id), type: encodeBase64(this.actived === 3 ? 1 : this.actived) }
      })
    },
    editItem(row) {
      const param = { id: row.id, subscriber: this.userInfo.id }
      this.$store.dispatch('detail/getDetails', { currentTab: this.actived, params: param }).then(() => {
        this.$store.commit('shelves/setEditType', this.actived)
        this.$router.push('/main/shelves')
      })
    },
    deleteItem(row) {
      this.$confirm('此操作将永久删除该条数据,是否继续删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('personalInfo/deleteListById', { id: row.id }).then(res => {
          if (res.status === 200) {
            this.getList()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          }
        })
      })
    },
    handleTabsClick(e) {
      this.$store.commit('personalInfo/setTableTab', e.name)
    }
  },
  components: {
    BreadCrumb
  }
}
</script>
<style lang="scss" scoped>
.innerWrapper {
  width: 78vw;
  margin: 0 auto;
}
  .tableWrapper {
    /*height: 600px;*/
  }
</style>
